<template>
  <div class="car-list">
    <!-- 排序和搜索区域 -->
    <div class="filter-container">
      <div class="sort-area">
        <ul class="sort-list">
          <li :class="{ active: sortType === 'default' }" @click="handleSort('default')">
            默认排序
          </li>
          <li :class="{ active: sortType === 'desc' }" @click="handleSort('desc')">
            按租金
            <i class="el-icon-sort-down"></i>
          </li>
          <li :class="{ active: sortType === 'asc' }" @click="handleSort('asc')">
            按租金
            <i class="el-icon-sort-up"></i>
          </li>
        </ul>
        <span class="car-count">*共有 {{ carList.length }} 种车型可以租用</span>
      </div>

      <div class="search-area">
        <el-input
          v-model="searchKey"
          placeholder="请输入车名搜索"
          class="search-input"
          clearable
          @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </div>
    </div>

    <!-- 车辆列表 -->
    <div class="car-container">
      <el-row :gutter="20">
        <el-col :span="8" v-for="car in carList" :key="car.cid">
          <el-card class="car-card" :body-style="{ padding: '0px' }">
            <div class="car-img">
              <el-image 
                :src="car.cimg" 
                fit="cover"
                :preview-src-list="[car.cimg]"
              ></el-image>
            </div>
            <div class="car-info">
              <h3 class="car-name">{{ car.cname }}</h3>
              <p class="car-desc">{{ car.cinfo }}</p>
              <div class="price-area">
                <div class="price">
                  <span class="currency">￥</span>
                  <span class="amount">{{ car.crent }}</span>
                  <span class="unit">/天</span>
                </div>
                <el-button 
                  type="primary" 
                  round
                  @click="handleOrder(car.cid)"
                >
                  立即预约
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'UserCarList',
  data() {
    return {
      carList: [],
      sortType: 'default',
      searchKey: ''
    }
  },
  created() {
    this.fetchCarList()
  },
  methods: {
    // 获取车辆列表
    async fetchCarList() {
      try {
        const res = await request.get('/car/list', {
          params: {
            sort: this.sortType,
            search: this.searchKey
          }
        })
        this.carList = res.data
      } catch (error) {
        this.$message.error('获取车辆列表失败')
      }
    },

    // 排序处理
    handleSort(type) {
      this.sortType = type
      this.fetchCarList()
    },

    // 搜索处理
    handleSearch() {
      this.fetchCarList()
    },

    // 预约处理
    handleOrder(cid) {
      // 检查是否登录
      const token = localStorage.getItem('token')
      if (!token) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      // 跳转到预约页面
      this.$router.push(`/order/create?cid=${cid}`)
    }
  }
}
</script>

<style lang="less" scoped>
.car-list {
  padding: 20px;

  .filter-container {
    margin-bottom: 20px;
    
    .sort-area {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      .sort-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          padding: 8px 15px;
          margin-right: 10px;
          cursor: pointer;
          border-radius: 4px;
          transition: all 0.3s;

          &:hover {
            background-color: #f5f7fa;
          }

          &.active {
            color: #409EFF;
            background-color: #ecf5ff;
          }

          i {
            margin-left: 5px;
          }
        }
      }

      .car-count {
        color: #666;
      }
    }

    .search-area {
      .search-input {
        width: 300px;
      }
    }
  }

  .car-container {
    .car-card {
      margin-bottom: 20px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      }

      .car-img {
        height: 200px;
        overflow: hidden;

        .el-image {
          width: 100%;
          height: 100%;
        }
      }

      .car-info {
        padding: 15px;

        .car-name {
          margin: 0 0 10px;
          font-size: 18px;
          font-weight: bold;
        }

        .car-desc {
          margin: 0 0 15px;
          color: #666;
          font-size: 14px;
          line-height: 1.5;
        }

        .price-area {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price {
            .currency {
              font-size: 14px;
              color: #f56c6c;
            }
            .amount {
              font-size: 24px;
              color: #f56c6c;
              font-weight: bold;
            }
            .unit {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style> 